<template>
	<div class="head-contain">
		<header id="header">
			<section class="container clearfix serch-contain">
				<h1 id="logo" class="current"> 
					<router-link to="/"> 
						<img src="../../../static/image/logo.png"> 
					</router-link> 
				</h1>
				
				<div class="h-r-nsl">
					
					<ul class="h-r-login fr">
						<!--<li class="app-downLoad">
							<a href="javascript:;"> <span class="vam ml5">APP下载</span> </a>
							<div class="app-download-box clearfix">
								<div id="qrcode" class="fl"><canvas width="108" height="108"></canvas></div>
								<div class="fr">
									<p>扫描下载内训宝APP</p>
									<a target="_blank" href="https://itunes.apple.com/cn/app/内训宝/id1286589024?mt=8"><em class="apple-icon"></em><span>App Store下载</span></a>
									<a target="_blank" href="https://t.nxb100.com/upload/t_nxb100_com/website/apk/20180425/1524642341567476084.apk"><em class="android-icon"></em><span>Android下载</span></a>
								</div>
							</div>
						</li>-->
						
						<li class="mr10 pr" id="is-login-one"  v-if="userInfo">
							 <router-link to="/uc/course" class="u-login-box pr"> 
								<img :src="domain + userInfo.avatar" width="30" height="30" v-if='userInfo.avatar'>
								<img src="../../../static/image/avatar-boy.gif" width="30" height="30" v-else>
								<q class="red-point msg-red" style="display: none">&nbsp;</q>
							</router-link> 
							<em class="icon12 l-em-arrow ml10"></em>
							<section class="fn-sub-box undis pr downmenu">
								<div class="DT-arrow"><em>◆</em><span>◆</span></div>
								<div class="fn-sub-wrap fn-sub">
									<dl class="clearfix">
										<dd>
											<router-link to='/uc/course'  title="学习中心">学习中心</router-link>
											<router-link to='/uc/plan'  title="我的任务">我的任务</router-link>
											<!--<a title="我的课程" href="">岗位课程</a>
											
											<a title="切换到管理端" href="">切换到管理端</a>-->
											<a title="" href="javascript:void(0)" @click="loginOut">退出</a>
										</dd>
									</dl>
								</div>
							</section>
						</li>
						<li class="current" v-else>
							 <router-link to="/login" title="登录"><span class="vam ml5">登录</span></router-link>
						</li>
					</ul>
					<aside class="h-r-search fl">
						 <label class="h-r-s-box">
						 	<!--<el-input style="width: 200px;" v-model="courseName" class="filter-item" placeholder="输入你想学的课程" @keyup.enter.native="serchCourse"></el-input>
							 <button type="submit" class="s-btn" @click="serchCourse"> <em class="icon18">&nbsp;</em> </button>-->
							 <el-input placeholder="输入你想学的课程" v-model="courseName"  prefix-icon="el-icon-search"  size="small" class="input-with-select" @keyup.enter.native="serchCourse">
							 </el-input>
							 <button type="submit" class="s-btn" @click="serchCourse"> 搜索 </button>
						 </label>
					</aside>
				</div>
				<aside class="mw-nav-btn">
					<div class="mw-nav-icon"></div>
				</aside>
				<div class="clear"></div>
			</section>
			<section class="nav-contain">
				<div class="container">
					<ul class="nav" id="guideInfo">
						<li>
							<router-link to="/" class="nav-fir" title="首页">首页</router-link>
						</li>
						<li>
							<router-link to="/course" class="nav-fir" title="课程">课程</router-link>
						</li>
						<li>
							<router-link to="/live" class="nav-fir" title="直播">直播</router-link>
						</li>
						<li>
							<router-link to="/articlelist" class="nav-fir" title="资讯">资讯</router-link>
						</li>
						<li>
							<router-link to="/planList" class="nav-fir" title="培训管理">培训</router-link>
						</li>
					</ul>	
				</div>
				
			</section>
		</header>
	</div>
</template>

<script>
	import { domainUrl } from '@/utils/index'
	export default {
		name: 'headTop',
		computed:{
			userInfo () {
			    return this.$store.getters.getStorageInfo;
			}
		},
		created(){
			this.domain = domainUrl();
			
		},
		data() {
			return {
				domain:"",
				courseName:""
			}
		},
		methods:{
			loginOut(){
				this.$store.dispatch('loginOut').then(() => {
			        this.$router.push({
						path: '/'
					}); // 为了重新实例化vue-router对象 避免bug
			   });
			},
			serchCourse(){
				this.$router.push({
					path: '/course',
					query:{
						serch:this.courseName
					}
				});
				
			}
		}
	}
</script>

<style lang="scss"  scoped>
@import '../../assets/style/mixin';
.router-link-active{
	color: #31a4ff;
}

#logo {
    float: left;
    @include wh( 168px,47px);
    overflow: hidden;
    margin: 35px auto 12px;
    a{
    	 display: block;
	    vertical-align: middle;
	    @include wh( 168px,47px);
	    img{
	    	@include wh( 168px,47px);
	    }
    }
}



.serch-contain{
	height: 100px;
}
.h-r-search{
	margin: 40px 0 0 172px;
}
.h-r-s-box{
	width: 450px;
	.s-btn {
	    background: $themeColor;
	    border: none;
	    position: absolute;
	    right: 0;
	    top: 0;
	    @include wh( 65px,32px);
		@include tl(center,32px);
	    cursor: pointer;
	    color: #fff;
	}	
}
.h-r-login{
	margin-top: 20px;
}
.nav-contain{
	 @include wh( 100%,50px);
	 background: $themeColor;
	 .nav{
	 	li{
	 		a{
    			float: left;
    			font-family: "Microsoft YaHei";
			    display: block;
			    font-size: 18px;
			    line-height: 50px;
			    padding: 0 12px;
			    margin-right: 26px;
			  	color: #fff;
			  	&:hover{
			  		color: #ec0012;
			  		text-decoration:none;
			  	}
	 		}
	 		.router-link-exact-active{
	 			color: #ec0012;
	 		}
	 	}
	 }
}

</style>